<template>
  <div class="scan">
    <div class="nav">
      <a class="close" />
      <p class="title">Scan QRcode</p>
    </div>
    <div class="scroll-container">
      <Scaner :stop-on-scanned="true" :draw-on-found="true" :responsive="false" @code-scanned="codeScanned" @error-captured="errorCaptured" />
    </div>
  </div>
</template>
<script lang="ts" setup>
import Scaner from '@/components/Scaner.vue'
import { onMounted } from '@vue/runtime-core'
let errorMessage = $ref('')
const codeScanned = (code) => {
  setTimeout(() => {
    alert(`扫码解析成功: ${code}`)
  }, 200)
}
const errorCaptured = (error) => {
  switch (error.name) {
    case 'NotAllowedError':
      errorMessage = 'Camera permission denied.'
      break
    case 'NotFoundError':
      errorMessage = 'There is no connected camera.'
      break
    case 'NotSupportedError':
      errorMessage = 'Seems like this page is served in non-secure context.'
      break
    case 'NotReadableError':
      errorMessage = "Couldn't access your camera. Is it already in use?"
      break
    case 'OverconstrainedError':
      errorMessage = "Constraints don't match any installed camera."
      break
    default:
      errorMessage = 'UNKNOWN ERROR: ' + error.message
  }
  console.error(errorMessage)
  alert('相机调用失败')
}
onMounted(() => {
  var str = navigator.userAgent.toLowerCase()
  var ver = str.match(/cpu iphone os (.*?) like mac os/)
  if (ver && ver[1].replace(/_/g, '.') < '10.3.3') {
    alert('相机调用失败')
  }
})
</script>
<style lang="scss" scoped>
.scan {
  height: 100%;
  width: 100%;
}
.scan .nav {
  width: 100%;
  height: 48px;
  line-height: 48px;
  position: fixed;
  top: 0;
  left: 0;
}
.scan .nav .title {
  padding: 0;
  margin: 0;
  font-size: 16px;
  color: #ffffff;
}
.scan .nav .close {
  display: inline-block;
  height: 22px;
  width: 22px;
  background: url('../../assets/back.png') no-repeat center;
  background-size: auto 100%;
  position: absolute;
  left: 16px;
  top: 14px;
}
</style>
